<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>林业局抽奖</title>
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<div class="bg">




			<div class="head">
				<div class="title"><img src="img/logo.png" alt="" style="width:20%"/><img src="img/title.png" alt="" class="img-tltle"/></div>
				<div class="full"><img src="img/full.png" alt="" id="fullclick"/></div>
			</div>
			<div class="bd">
				<div class="left">
					<div class="sm">
						<span class="bt">签到抽奖</span>
						<span class="num">共有1000人参与</span>
					</div>
					<div class="draw">
						<img src="img/1.png" alt="" />					
					</div>
					<div class="tc">
						<div>
							<img src="img/1.jpg" alt="" id="image1"/>
						</div>
						<div>
							<img src="img/1.jpg" alt="" id="image2"/>
						</div>
						<div>
							<img src="img/1.jpg" alt="" id="image3"/>
						</div>
						<div>
							<img src="img/1.jpg" alt="" id="image4"/>
						</div>
						<div>
							<img src="img/1.jpg" alt="" id="image5"/>
						</div>
					</div>
					<a href="#" class="but" id="btn">开始抽奖</a>
					<span class="hoster">
						<p >主办：<span style="letter-spacing: 0.78px;">上 &nbsp;&nbsp;&nbsp;海&nbsp;&nbsp;&nbsp;市&nbsp;&nbsp;&nbsp;林&nbsp;&nbsp;&nbsp;业 &nbsp;&nbsp;&nbsp;局</span></p>
                        <p> 承办：上海市林业病虫防治检疫站</p>
                        <p style="letter-spacing: 1.8px;">上 &nbsp;&nbsp;海 &nbsp;&nbsp;市 &nbsp;&nbsp;林&nbsp;&nbsp;学&nbsp;&nbsp;会 </p>
					</span>
					<div style="position: absolute; top: 78%; left: 3.5%;">
						<img src="img/erweima_03.jpg" alt="" width='100'/>
					</div>
				</div>
				<div class="right">
					<p class="rule">抽奖规则</p>
					<p class="rule-word">参与现场微信签到的用户，并且关注“上海林业”微信官方平台。官方通过投票时提供的手机号联系并发送奖品。</p>
					<p class="rule">中奖名单</p>
					<div class="scllo">
						<ul id="awardList">
							<!-- <li><img src="img/2.jpg" alt="" /><span>微信名微信名微信名微信名微信名</span></li>
							<li><img src="img/2.jpg" alt="" /><span>微信名微信名微信名微信名微信名</span></li>
							<li><img src="img/2.jpg" alt="" /><span>微信名</span></li>
							<li><img src="img/2.jpg" alt="" /><span>微信名</span></li>
							<li><img src="img/2.jpg" alt="" /><span>微信名</span></li>
							<li><img src="img/2.jpg" alt="" /><span>微信名</span></li>
							<li><img src="img/2.jpg" alt="" /><span>微信名</span></li>
							<li><img src="img/2.jpg" alt="" /><span>微信名</span></li>
							<li><img src="img/2.jpg" alt="" /><span>微信名</span></li>
							<li><img src="img/2.jpg" alt="" /><span>微信名</span></li> -->
						</ul>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-2.2.3.min.js" ></script>
		<script type="text/javascript" src="js/jquery.fullscreen.js" ></script>
		<script>
			
			$(document).ready(function(){
				$("#fullclick").click(function(){
					$(".bg").fullScreen();
					e.preventDefault();
				});

				//获取签到人数
				$.get("/award/get_count",function(data){
					$('.num').html('共有'+data+'人参与');
				})

				//	获取已经中奖列表
				$.getJSON("/award/get_award_list",function(data){
					var str = '';
					for (var i = 0; i < data.length; i++) {
						str += '<li><img src=" '+data[i].headimgurl+' " alt="" /><span>'+data[i].nickname+'</span></li>';
					}	
					$("#awardList").append(str)
				})

			});
			
			alldata = new Array();
			$(function(){
				//获取所有签到列表
				$.getJSON("/award/index",function(data){
					
					for (var i = 0; i < data.length; i++) {
						// console.log(data[i])
						alldata.push(data[i].headimgurl)
					}
					
					var num = alldata.length - 1;
					var show1 = $("#image1");
		            var show2 = $("#image2");
		            var show3 = $("#image3");
		            var show4 = $("#image4");
		            var show5 = $("#image5");
					var open = false;
						
					function change1(){
						var randomVal = Math.round(Math.random() * num);
						var prizeName = alldata[randomVal];
						//show.text(prizeName);
						show1.attr("src",prizeName);
					}
					function change2(){
						var randomVal = Math.round(Math.random() * num);
						var prizeName = alldata[randomVal];
						//show.text(prizeName);
						show2.attr("src",prizeName);
					}
					function change3(){
						var randomVal = Math.round(Math.random() * num);
						var prizeName = alldata[randomVal];
						//show.text(prizeName);
						show3.attr("src",prizeName);
					}
					function change4(){
						var randomVal = Math.round(Math.random() * num);
						var prizeName = alldata[randomVal];
						//show.text(prizeName);
						show4.attr("src",prizeName);
					}
					function change5(){
						var randomVal = Math.round(Math.random() * num);
						var prizeName = alldata[randomVal];
						//show.text(prizeName);
						show5.attr("src",prizeName);
					}
					
					function run(){
//						alert(7)
						if(!open){
//							alert(8)
							//指定函数出现的速度，以毫秒计算-->
							timer1=setInterval(change1,100);
							timer2=setInterval(change2,100);
							timer3=setInterval(change3,100);
							timer4=setInterval(change4,100);
							timer5=setInterval(change5,100);
							// btn.removeClass('start').addClass('stop').text('停止');
							$("#btn").html('停止')
							open = true;
							// alert('99')
						}else{
//							alert(9)
							//后台拉取5个中奖名单
							$.getJSON("/award/get_award_user",function(data){
								clearInterval(timer1);
								clearInterval(timer2);
								clearInterval(timer3);
								clearInterval(timer4);
								clearInterval(timer5);
								$("#btn").html('开始抽奖')
								
								if (data.code===-1) {
									for (var i = 1; i <= 5; i++) {
										$("#image"+i).attr("src",'img/1.png');
									}
//									show.attr("src",'img/1.png');
									alert('20个奖品已抽完，无需重复抽奖！');
									return false;
								}
								
								// btn.removeClass('stop').addClass('start').text('开始抽奖');
								open = false;
								
								if (data.length>0) {							
									var str = '';
									for (var i = 1; i <= data.length; i++) {
										
										$("#image"+i).attr("src",data[i-1].headimgurl);
										str += '<li><img src=" '+data[i-1].headimgurl+' " alt="" /><span>'+data[i-1].nickname+'</span></li>';

										for (var j = 0; j < alldata.length; j++) {
											if(alldata[j]==data[i-1].headimgurl){
												alldata.splice(j,1);
											}
										}
										
										
										// $('.tc').hide();
									}	

									$("#awardList").append(str)
								}else{
									for (var i = 1; i <= 5; i++) {
										$("#image"+i).attr("src",'img/1.png');
									}
									
									alert('所有参与活的人都已中奖！请无需再抽！');
								}
								
								// console.log(data[0].headimgurl);
							})
						}
					}

					$("#btn").click(function(){
						$('.tc').show();
						run();
					});

			        $(document).keydown(function(event){ 
			            if(event.keyCode==13){
			            	$("#btn").click(); 
			            } 
			        }); 
			        
			        $('.tc').click(function(){
			        	$('.tc').hide();
			        })

				});


				// var alldata = new Array("img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg");		
				



		//btn.click(function(){run();})			 
			})
		</script>
	</body>
</html>
